<template>
    <div>
      <el-card class="card">

        <div class="title">订单信息:
          <span style="margin-left: 10px">
            <el-tag
              v-if="status === 0"
              type="danger"
              size="small"
              effect="dark"
            >
              {{ statusList[status].name }}
            </el-tag>
            <el-tag
              v-else-if="status === 1"
              size="small"
              type="warning"
              effect="dark"
            >
              {{ statusList[status].name }}
            </el-tag>
            <el-tag v-else-if="status === 2" size="small">
              {{ statusList[status].name }}
            </el-tag>
            <el-tag v-else-if="status === 3" size="small" type="info">
              {{ statusList[status].name }}
            </el-tag>
          </span>
        </div>
        <div class="main">
          <el-row :gutter="10">
            <el-col :span="6" class="item">
              <span>订单信息:</span>
              <span class="text">{{this.orderReturnApply.orderSn}}</span>
              <el-button type="text" class="btn" @click="goDetail(orderReturnApply.orderId)">查看订单详情</el-button>
            </el-col>
              <el-col :span="6">
                 <span>退单人姓名:</span>
             <span  class="text">{{this.orderReturnApply.returnName}}</span>
              </el-col>
                <el-col :span="6">
                   <span> 退单理由:</span>
            <span  class="text">{{this.orderReturnApply.reason}}</span>
                </el-col>
                  <el-col :span="6">
                     <span>退单描述:</span>
             <span  class="text">{{this.orderReturnApply.description}}</span>
                  </el-col>
                   <el-col :span="6">
                     <span>申请时间:</span>
               <span class="text">{{this.orderReturnApply.createTime}}</span>
                  </el-col>

          </el-row>

        </div>
         <el-divider></el-divider>
         <div class="title">退货商品：</div>
         <div class="main">
           <el-table
    :data="orderList"
    border
    style="width: 100%">
    <el-table-column

      label="商品图片"
      width="180">
      <template slot-scope="scope">
        <img :src="scope.row.pic" alt="" class="pic">
      </template>
    </el-table-column>
    <el-table-column
      prop="desc"
      label="商品描述"
       align="center"
      width="180">
    </el-table-column>
    <el-table-column
     align="center"
      prop="price"
      label="商品价格">
    </el-table-column>
     <el-table-column
 align="center"
      label="商品属性">
      <template slot-scope="scope">
        <div>
          {{scope.row.attr| initAttrArr}}
        </div>
      </template>
    </el-table-column>
    <el-table-column

      align="center"
      prop="num"
      label="商品数量" >
    </el-table-column>
    <el-table-column

      align="center"
      prop="total"
      label="总计" >
    </el-table-column>
  </el-table>
         </div>
          <el-divider></el-divider>
          <div class="title">用户信息:</div>
          <div class="main">
            <el-row :gutter="10">
              <el-col :span="6">
                <span>联系人：</span>
                <span class="text">{{this.orderReturnApply.memberUsername}}</span>
              </el-col>
              <el-col :span="6">
                <span>联系电话：</span>
                <span class="text">{{this.orderReturnApply.returnPhone}}</span>
              </el-col>
            </el-row>
          </div>
            <el-divider></el-divider>
          <div class="title">费用信息:</div>
          <div class="main">
            <el-row :gutter="10">
              <el-col :span="6">
                <span>退单金额:</span>
                <span class="texts">{{this.orderReturnApply.returnAmount}}</span>
              </el-col>
              <el-col :span="6">
                <span>运费金额:</span>
                <span class="texts">0</span>
              </el-col>
            </el-row>
            <div v-if="status===0">
              <el-form ref="form" :model="form" :rules="rules">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <el-form-item label="确认退款金额:" class="items">    <el-input-number v-model="form.returnAmount" @change="numChange" :min="0"  ></el-input-number></el-form-item>
                  </el-col>
                     <el-col :span="6">
                    <el-form-item label="处理人姓名:" class="items" prop="handleMan">    <el-input v-model="form.handleMan" placeholder=""></el-input></el-form-item>
                  </el-col>
                   <el-col :span="6">
                    <el-form-item label="处理备注:" class="items" prop="handleNote">    <el-input v-model="form.handleNote" placeholder=""></el-input></el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="btns">
                  <el-button type="primary" @click="agree('form')">同意退款</el-button>
                  <el-button @click="refuseReturan('form')">拒绝退款</el-button>
              </div>

            </div>
            <div v-if="status===1">
              <el-form ref="receiveForm" :model="receiveForm" :rules="rules">
                <el-row :gutter="10">
                     <el-col :span="6">
                    <el-form-item label="收货人姓名:" class="items" prop="receiveMan">    <el-input v-model="receiveForm.receiveMan" placeholder=""></el-input></el-form-item>
                  </el-col>
                   <el-col :span="6">
                    <el-form-item label="收货备注:" class="items" prop="receiveNote">    <el-input v-model="receiveForm.receiveNote" placeholder=""></el-input></el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="btns">
                  <el-button type="primary" @click="agreeRevice('receiveForm')">确认收货</el-button>

              </div>
            </div>
              <el-divider v-if="status>1"></el-divider>
            <div v-if="status>=2">
              <div class="title">处理结果：</div>
              <div class="main">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <span>处理人：</span>
                    <span class="text">{{orderReturnApply.handleMan}}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>处理备注：</span>
                    <span class="text">{{orderReturnApply.handleNote}}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>处理时间：</span>
                    <span class="text">{{orderReturnApply.handleTime}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
             <el-divider v-if="status>1"></el-divider>
             <div v-if="status===2">
               <div class="title">收货信息：</div>
               <div class="main">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <span>退单收货人:</span>
                    <span class="text">{{orderReturnApply.receiveMan}}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>退单收货备注:</span>
                    <span class="text">{{orderReturnApply.receiveNote}}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>退单收货时间:</span>
                    <span class="text">{{orderReturnApply.receiveTime}}</span>
                  </el-col>
                </el-row>
              </div>
             </div>
          </div>
      </el-card>
    </div>
</template>

<script>
import {backInfo,agreeReturn,refuse,reciveProduct} from "@/api/back"
export default {
    props: {

    },
    data() {
        return {
          id:'',
          orderReturnApply:{},
           status: 0,
           statusList: [
                { name: '待处理', id: 0 },
                { name: '退货中', id: 1 },
                { name: '已完成', id: 2 },
                { name: '已拒绝', id: 3 }
            ],
            orderList:[],


           form:{
              returnAmount:0,
               handleMan:"",
              handleNote:''

           },
           rules: {
         handleMan: [
            { required: true, message: '处理人姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
         handleNote: [
            { required: true, message: '处理人备注', trigger: 'blur' }
          ],
        receiveMan: [
            { required: true, message: '处理人姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          receiveNote:[
            { required: true, message: '处理人备注', trigger: 'blur' }
          ]
          },
          receiveForm:{
            receiveMan:'',
            receiveNote:''
          }
        };
    },
    computed: {

    },
    created() {
      this.id=this.$route.query.ids
      this.init()
    },
    mounted() {

    },
    watch: {

    },
    methods: {
    async init(){
        this.orderReturnApply=(await backInfo(this.id)).data.orderReturnApply
          this.status = this.orderReturnApply.status
        console.log(this.orderReturnApply)
        this.getOrderList()
        // console.log(this.orderList)
      },
      goDetail(id){
       this.$router.push({path:'/order/detail/',query:{ids:id}})
      },
      getOrderList(){
        this.orderList=[{
          pic:this.orderReturnApply.productPic,
           desc:this.orderReturnApply.productName,
           price:this.orderReturnApply.productRealPrice,
            attr:this.orderReturnApply.productAttr,
              num:this.orderReturnApply.productCount,
              total:this.orderReturnApply.returnAmount
        },
       ]
      },
      numChange(){

      },
      agree(formName){
         this.$refs[formName].validate((valid) => {
          if (valid) {
            agreeReturn(this.id,{
          id:this.id,
         handleMan:this.form.handleMan,
         handleNote:this.form.handleNote,
         returnAmount:this.form.returnAmount
        }).then(res=>{
         if(res.success){
           this.$message.success('同意退款成功')
           this.init()
         }
        })
          } else {
         this.$message.warning('请认真填写')
            return false;
          }
        });

      },
      refuseReturan(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            refuse(this.id,{
          id:this.id,
         handleMan:this.form.handleMan,
         handleNote:this.form.handleNote,
         returnAmount:this.form.returnAmount
        }).then(res=>{
         if(res.success){
           this.$message.success('拒绝退款成功')
           this.init()
         }
        })
          } else {
           this.$message.warning('请认真填写')
            return false;
          }
        });

      },
      agreeRevice(formName){
         this.$refs[formName].validate((valid) => {
          if (valid) {
            reciveProduct(this.id,{
              id:this.id,
              receiveMan:this.receiveForm.receiveMan,
              receiveNote:this.receiveForm.receiveNote
            }).then(res=>{
              // console.log(res)
              if(res.success){
                this.$message.success('确认收货成功')
                 this.init()
              }
            })
          } else {
           this.$message.warning('请认真填写')
            return false;
          }
        });
      }
    },
    components: {

    },
     filters: {
    initAttrArr(v) {
      var reg = /^\[\{\"/gi;
      if (reg.test(v)) {
        const arr = JSON.parse(v);
        let str = "";
        arr.forEach((element) => {
          str = str + element.key + ":" + element.value + " ";
        });
        return str;
      } else {
        return v;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title{
  font-weight: 700;
}
.main{
  width: 100%;
  margin-top: 30px;
  span{
     line-height: 40px;
    font-size: 14px;
  }
  .text,.texts{
    margin-left: 10px;
  }
  .texts{
    color: red;
  }
  .item{
    position: relative;
    .btn{
      position: absolute;
      left: 220px;
      font-size: 12px;
    }
  }
}
.pic{
  width: 100px;
  height: 100px;
}
.items{
  width: 70%;
}
.btns{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
</style>
